import React, { memo,useEffect } from 'react'
// import { getTopList } from '@/services/recommend'
import {useSelector,shallowEqual,useDispatch} from "react-redux"
import XJDThemeHeaderRCM from "@/components/theme-header-rcm" 
import {RankingWrapper} from "./style"
import XJDTopRanking from '@/components/top-ranking';
import { getTopListAction } from '../../store/actionCreators';
export default memo(function XJDRecommendRanking() {
const {upRanking,newRanking,originRanking}=useSelector(state=>({
upRanking:state.getIn(["recommend", "upRanking"]),
newRanking:state.getIn(["recommend", "newRanking"]),
originRanking:state.getIn(["recommend", "originRanking"]),
}),shallowEqual)
const dispatch =useDispatch()
useEffect(()=>{
  dispatch(getTopListAction(19723756));
  dispatch(getTopListAction(3779629));
  dispatch(getTopListAction(2884035));
},[dispatch])

  return (
    <RankingWrapper>
      <XJDThemeHeaderRCM title="榜单"/>
      <div className="tops">
        <XJDTopRanking info={upRanking}/>
        <XJDTopRanking info={newRanking}/>
        <XJDTopRanking info={originRanking}/>
      </div>
    </RankingWrapper>
  )
})